
const express = require('express')
const app = express()
app.listen(3000, function () {
    console.log('http://localhost:3000')
});

const path = require('path')

//1. 配置静态资源
//2. 配置post中间件
app.use('/static', express.static(path.join(__dirname, 'static')))
app.use(express.urlencoded({ extended: true }))



const persons = [
    {
        "username": "xm00",
        "password": "1234"
    },
    {
        "username": "xm001",
        "password": "222"
    },
    {
        "username": "xm002",
        "password": "222"
    },
    {
        "username": "xm003",
        "password": "222"
    },
    {
        "username": "xm004",
        "password": "222"
    },
    {
        "username": "xm005",
        "password": "222"
    },
    {
        "username": "xm006",
        "password": "222"
    },
    {
        "username": "xm007",
        "password": "222"
    },
    {
        "username": "xm008",
        "password": "222"
    },
    {
        "username": "xm009",
        "password": "222"
    },
    {
        "username": "xm0010",
        "password": "222"
    }
]


//users?page=1&size=5
app.get('/users', (req, res) => {

    //共11条
    //每页5条 
    //共3页
    let totalRows = persons.length //总条数
    let size = 3//每页显示5条
    // let page = 2//默认第1页
    let page = Number(req.query.page) || 1

    let totalPage = Math.ceil(totalRows / size) //总页码
    if (page > totalPage) {
        page = totalPage
    }

    let start = (page - 1) * size
    let end = page * size

    let result = persons.slice(start, end) //筛选后的结果


    let str = ``

    result.forEach(item=>{
        str += `
        <li>
            <a href="/user/${item.username}">${item.username}</a>
        </li>
        `
    })

    //上一页与下一页
    let prevPage = page - 1
    if( prevPage <= 0 ){
        prevPage = 1
    }
    let nextPage = page + 1
    if( nextPage >totalPage ){
        nextPage = totalPage
    }

    let resultStr = `
                <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>用户列表</title>
                        <link rel="stylesheet" href="/static/css/css.css">
                    </head>
                    <body>
                        <div class="list">
                            <ul>
                               ${ str }
                            </ul>
                            <div class="navigator">
                                <a href="/users?page=${prevPage}">上一页</a>
                                <a href="/users?page=${nextPage}">下一页</a>
                            </div>
                        </div>
                    </body>
                    </html>
    `

    res.send(resultStr)
})

app.get('/user/:username', (req, res) => {
    let username = req.params.username //传递的是用户名：注意，我们当时注册时，不允许重名
    let i = persons.findIndex(item => {
        return item.username === username
    })

    if (i == -1) {

        return res.send('未找到用户')
    }

    let user = persons[i]
    let result = `
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>用户列表</title>
                <link rel="stylesheet" href="/static/css/css.css">
            </head>

            <body>
                <div class="detail">
                <p>用户名：${user.username}</p>
                <p>密码：${user.password}</p>
                </div>
            </body>
            </html>
        `

    res.send(result)
})


// 定义登录和注册的路由
app.get('/login', (req, res) => {
    res.sendFile(path.join(__dirname, 'views/login.html'))
})
app.get('/register', (req, res) => {
    res.sendFile(path.join(__dirname, 'views/register.html'))
})

app.post('/login', (req, res) => {
    // res.send('实现登录')
    res.send(req.body)
})
app.post('/register', (req, res) => {
    res.send('实现注册')
})


/*

/*
    get : /login  => login.html页面
    post : /login  => 实现登录
    get : /register  => register.html页面
    post : /register  => 实现注册

    要样式：最起码要有背景图

    get : /users       
        功能：展示用户列表信息
        默认是第1页 取5条
        /users?page=1&size=5
        /users?page=2&size=5
        点击列表页的某个名字跳转到 /user/:index
    get: /user/:index
        返回对应index下标的用户


    备注：  
        本来应该有一个列表页和详情页,但目前先不用建立页面
*/ 